<template>
    <div class="TaskRelease">
        <header>
            <span></span>任务发布
        </header>
        <div class="body">
            <el-form inline ref="QueryForm" :model="TaskKey">
                <el-form-item label="计划事项分布：">
                    <el-select v-model="TaskKey.orgId" clearable>
                        <el-option v-for="(v, k) in orgdata" :key="k" :label="v.orgName" :value="v.orgId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="涉及部门：">
                    <el-select v-model="TaskKey.leadDepartId" clearable>
                        <el-option v-for="(v, k) in departdata" :key="k" :label="v.departName" :value="v.departId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="表格名称：" clearable>
                    <el-input v-model="TaskKey.draftName" clearable placeholder="请填写表格名称">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="background: #6E96E9;" size="small" icon="el-icon-search"
                        @click="queryfn">查询</el-button>
                    <el-button type="warning" style="background: #F0BB3A;" size="small" icon="el-icon-plus"
                        @click="uploadfn">上传</el-button>
                    <el-button type="success" style="background: #84BA6E;" size="small" icon="el-icon-share"
                        @click="releasefn">任务发布</el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete" plain @click="deletefn">删除</el-button>
                </el-form-item>
            </el-form>
            <div style="height:700px">
                <el-table border ref="multipleTable" :data="TaskData" @selection-change="selectionChange" stripe
                    :header-cell-style="{ background: '#6E96E9', textAlign: 'center' }">
                    <el-table-column align="center" type="selection" width="42">
                    </el-table-column>
                    <el-table-column label="年度" align="center" width="200" prop='firstIndex'>
                    </el-table-column>
                    <el-table-column label="任务模板表格名称" align="center" prop='secondIndex'>
                    </el-table-column>
                    <el-table-column label="年度计划事项分类" align="center" width="300" prop='thirdIndex'>
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.orgId" placeholder="请选择">
                                <el-option v-for="item in orgdata" :key="item.orgId" :label="item.orgName"
                                    :value="item.orgId">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="涉及部门" align="center" width="300" prop='score'>
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.departId" multiple placeholder="请选择">
                                <el-option v-for="item in departdata" :key="item.departId" :label="item.departName"
                                    :value="item.departId">
                                </el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建人" align="center" prop='orgName'>
                    </el-table-column>
                    <el-table-column label="上传时间" align="center" width="200" prop='departName'>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="180">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-delete" @click="DelteTaskInfo(scope.row)"
                                style="color:#E74C5E">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <footer style="float:right">
            <!-- page-size 每页显示条数  current-page当前页数  total总条数-->
            <el-pagination @size-change="sizechangefn" @current-change="getData" :current-page.sync="currentPage"
                :page-size.sync="pageSize" layout="total, prev, pager, next, jumper" :total="total" background>
            </el-pagination>
        </footer>
    </div>
</template>

<script>
import axios from "axios"
export default {
    name: 'RectTaskRelease',
    data() {
        return {
            // 搜索的条件
            TaskKey: {
                orgId: '',
                leadDepartId: '',
                deadLine: ''
            },
            // 表格数据
            TaskData: [],
            // 每页条数
            pageSize: 10,
            // 总条数
            total: 0,
            // 当前页数
            currentPage: 1,
            // 选中的数据
            SelectData: [],
            // 机构
            orgdata: [],
            // 部门
            departdata: [],
        }
    },
    methods: {
        //获取数据
        getData() {
            
            let url = `http://101.201.29.183:3500/task/getTaskInfo?page=${this.currentPage}&size=${this.pageSize}`
            axios.post(url, {
                orgId: this.TaskKey.orgId,
                leadDepartId: this.TaskKey.leadDepartId,
                deadLine: this.TaskKey.deadLine
            },
            ).then(res => {
                if (res.data.success == true) {
                    this.TaskData = res.data.data;
                    this.total = res.data.total;
                } else {
                    this.$message.error(res.data.msg);
                }

            })
        },
        // 查询
        queryfn() {
            this.getData();

        },
        // 上传
        uploadfn() {
            console.log('上传');
        },
        // 发布
        releasefn() {
            console.log("发布");
        },
        // 删除
        deletefn() {
            if (this.SelectData.length == 0) {
                this.$alert('请选择任意一项', '提示', {
                    confirmButtonText: '确定',
                    callback: () => {
                        this.$message({
                            type: 'info',
                            message: `已取消删除`
                        });
                    }
                });
                return false;
            }
            let arr = [];
            this.SelectData.forEach((value) => {
                arr.push(value.id);
            });
            console.log(arr);
            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                // 发送请求
                console.log('要删除的数据，要删除的数据', this.SelectData);
            }).catch(() => {
                this.$message.info("已取消删除");
            });
        },
    
        // 删除单个提交
        DelteTaskInfo(data) {
            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                console.log("删除发送请求", data.id);

                //   this.api.sciencearticle.del(data.id).then((res) => {
                //     if (res.data.code == 200) {
                //       this.$message.success('删除成功')
                //       this.gettabledata();
                //     } else {
                //       this.$message.error('删除失败')
                //     }
                //   });
            })
                .catch(() => {
                    this.$message.info("已取消删除");
                });
        },
        // 表格多选框
        selectionChange(val) {
            this.SelectData = val;
            console.log(val);
        },
        // 分页
        sizechangefn() {
            this.currentPage = 1;
            this.getData();
        },
    },
    mounted() {
        this.getData();
        let url = `http://101.201.29.183:3500/Org/query`
        axios.get(url).then(res => {
            if (res.data.success == true) {
                this.orgdata = res.data.data;
            } else {
                this.$message.error(res.data.msg);
            }

        })
        this.api.depart.all().then(res => {
            if (res.data.success == true) {
                this.departdata = res.data.data
            }
        });


    },
}
</script>

<style scoped>
.TaskRelease {
    text-align: left !important;
}

.TaskRelease header span {
    display: inline-block;
    width: 4px;
    height: 16px;
    margin-right: 5px;
    background: rgb(110, 150, 233);
}

.TaskRelease header {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
}

::v-deep .el-form-item__label {
    width: auto !important;
    padding: 0 !important;
}

::v-deep .body .el-input {
    /* width: 266px; */
}

::v-deep .el-table thead {
    color: #fff;
}

.body {
    padding: 20px 0;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: #F0F4FD;
}

::v-deep .el-pagination .btn-prev,
::v-deep .el-pagination .btn-next {
    background: #fff;
    border: 1px solid #D7D7D7;
}

::v-deep .el-pagination.is-background .el-pager li {
    background: #fff;
    border: 1px solid #D7D7D7;
}
</style>